// components/topBar/topBar.js
var colorParse = require("../../common/color.js");

const defaultStyle = {
    mainColor: "#47b34f",
    navigationTitle: ""
};

Component({
    /**
   * 组件的属性列表
   */
    options: {
        addGlobalClass: true
    },
    properties: {
        sizeTop: {
            type: Number,
            observer(newval, oldVal, changePath) {
                this.setData({
                    topBarTop: newval
                });
            }
        },
        orderDetail: {
            type: String,
            observer(newval, oldVal) {
                this.setData({
                    orderDetail: newval
                });
            }
        },
        superOrderDetail: {
            type: String,
            observer(newval, oldVal) {
                this.setData({
                    superOrderDetail: newval
                });
            }
        },
        sizeHeight: {
            type: Number,
            observer(newval, oldVal, changePath) {
                this.setData({
                    topBarHeight: newval
                });
            }
        },
        componentStyle: {
            type: Object,
            observer(newVal, oldVal, changePath) {
                var itemStyle = this.data.itemStyle;
                this.setData({
                    itemStyle: {
                        ...itemStyle,
                        ...newVal
                    }
                });
                if (newVal.mainColor) {}
            }
        }
    },
    /**
   * 组件的初始数据
   */
    data: {
        itemStyle: {
            ...defaultStyle
        },
        comOpcity: 0,
        bgHeight: 200,
        orderDetail: 0,
        superOrderDetail: 0
    },
    /**
   * 组件的方法列表
   */
    methods: {
        canvas() {
            var that = this;
            var bgHeight = parseInt(that.data.bgHeight);
            const ctx = wx.createCanvasContext("bgcanvas", this);
            var a = wx.getSystemInfoSync().windowWidth;
            var rpx = a / 375;
            var mainColor = that.data.itemStyle.mainColor;
            //将canvasImg清除
                        that.setData({
                canvasImg: ""
            });
            ctx.lineTo(0, 0);
            ctx.lineTo(375 * rpx, 0);
            ctx.lineTo(375 * rpx, bgHeight * rpx);
            ctx.bezierCurveTo(375 * rpx, (bgHeight + 28) * rpx, 0, (bgHeight + 28) * rpx, 0, bgHeight * rpx);
            ctx.lineTo(0, 0);
            ctx.closePath();
            ctx.setFillStyle("#fff");
            ctx.fill();
            ctx.draw(true);
            ctx.lineTo(375 * rpx, 0);
            ctx.lineTo(375 * rpx, bgHeight * rpx);
            ctx.bezierCurveTo(375 * rpx, (bgHeight + 28) * rpx, 0, (bgHeight + 28) * rpx, 0, bgHeight * rpx);
            ctx.lineTo(0, 0);
            ctx.closePath();
            const grd = ctx.createLinearGradient(0, 0, 375 * rpx, 0);
            grd.addColorStop(0, colorParse.hexToRgb(mainColor, .8));
            grd.addColorStop(1, mainColor);
            ctx.setFillStyle(grd);
            ctx.fill();
            this.setData({
                canvasHeight: (bgHeight + 28) * 2
            });
            ctx.draw(true, function(e) {
                wx.canvasToTempFilePath({
                    canvasId: "bgcanvas",
                    quality: 1,
                    success(res) {
                        that.setData({
                            canvasImg: res.tempFilePath
                        });
                    },
                    fail(err) {},
                    complete(com) {}
                }, that);
            });
        },
        goBack() {
            wx.navigateBack({});
        }
    },
    lifetimes: {
        attached() {}
    },
    pageLifetimes: {}
});